<?
$images = $this->images;
if (count($images)) {
    preg_match('/.*\//', $images[0]['url'], $matches);
    $url = $matches[0];
} else {
    $url = '';
}
?>


<div id="modal" style="display: none;">
    <div style="position: relative;">
        <div id="viewport">

            <div id="pict" style="background: url(/images/zoom/s.png) no-repeat; width: 900px; height: 1350px;">
                <!--top level map content goes here-->
            </div>
            <div style="height: 1800px; width: 1200px;">
                <img id="pict_big" src="/images/zoom/s2.png" alt="" />
                <div class="mapcontent">

                </div>
            </div>
        </div>
    </div>
</div>

<div class="map-control" style="z-index: 9999" id="draggable">
    <div class="managepdf">

                      <a href="#zoom" class="zoom" title="Zoom in" ></a>
                      <a href="#out" class="back" title="Zoom out"></a>
                      <a href="#previous" class="left" title="Previous"></a>
                      <a href="#up" class="up" title="Go up"></a>
                       <a href="#down" class="down" title="Go down"></a>
                       <a href="#next" class="right" title="Next"></a>
                       <a href="#close" class="close" title="Close"></a>

           </div>
</div>


<div align=center>
    <div style="padding:10px;">
    </div>
    <div id="bookflip"></div>
    <div>
        <div style="width:1196px;margin:10px;background-color: #000000;padding: 5px;color: #ffffff;">
            <div style="margin: 0 auto;width: 530px;">
            <div class="in">
                <button class="btn icon arrowleft" onclick="clipmeR();">Prev</button>
                <button class="btn icon arrowright right" onclick="clipmeL();">Next</button>
                <button class="btn icon search" id="zoom">Zoom</button>
            </div>
            <div class="in">
                <div class="btn-group">
                  <a class="btn side" href="#" id="leftPage">L</a>
                  <a class="btn btn-primary side" href="#" id="rightPage">R</a>
                </div>
            </div>
            <div class="in">
            &nbsp;&nbsp;Select page:<select id="flipSelect" style="display:none;width: auto;margin-left: 5px;color: #000000;"></select>
            </div>
            <div style="clear: both;"></div>
            </div>
        </div>
    </div>
</div>




<div id="pages" style="width:1px;height:1px;overflow:hidden;">
    <div style="text-align:center;color:#ffffff"><p style="font-size: 2em;">


    </div>


    <!--		<div name="Home" style="background: url('book/page0001_i1.jpg');"> </div>-->
    <!--		<div style="border:1px solid #000000;background:url('book/page0002_i1.jpg');"> </div>-->
    <? foreach ($images as $image): ?>
    <div style="background:url('<?= $image['url'] ?>');" class="page"></div>
    <? endforeach ?>
    <script type="text/javascript">
        var pCountAll = <?=count($images);  ?>;
    </script>
</div>




<script type="text/javascript">
    var LeftSideOn = false;
    var changeSide = function(side, forse){
        forse = forse||false;
        var countPage = $('#pages .page').length;
        if(side=='left' && nextPage==0 && !forse){return false;}
        if(side=='right' && nextPage==countPage && !(countPage%2)){return false;}

        if(side=='left'){
            $('#rightPage').removeClass('btn-primary');
            $('#leftPage').addClass('btn-primary');
            LeftSideOn = true;
        }
        else{
            $('#rightPage').addClass('btn-primary');
            $('#leftPage').removeClass('btn-primary');
            LeftSideOn = false;
        }
    };


    $().ready(function() {
        waitOnLoad();


        $('.side').click(function(){
            if($(this).attr('id')=='leftPage'){
                changeSide('left');
            }
            else{
                changeSide('right');
            }
            return false;
        });


    });


    var firstStart = true;
    $('#zoom').click(function(){
        var fileName = getBigFileName();
        var midle = getMidlFileName();
        $('#pict').css('background-image', 'url(' + midle + ')');
        $('#pict_big').attr('src', fileName);
        waitOnLoad();
        $('#modal').dialog({
            resizable: false,
            width:940,
            closeOnEscape:true,
            modal: true,
            bgiframe: true
        });

        if(firstStart){
            firstStart=false;
            var leftPx = $('#modal').parent().position().left+945;
            var topPx = $('#modal').parent().height() + $('#modal').parent().position().top -45;
            $('.map-control').css('left', leftPx+'px');
            $('.map-control').css('top', topPx+'px');
        }
        $('.map-control').css('display', 'block');
        $(".ui-dialog-titlebar").hide();
    });

    $( "#draggable" ).draggable();
    $('.ui-widget-overlay').live('click', function() {
        $('#modal').dialog( "close" );
        $('.map-control').css('display', 'none');
    });

    $('#viewport').height(screen.height-200);
    var boxHeight = $('#viewport').height()-50;
    $(document).ready(function() {
        $("#viewport").mapbox({mousewheel: true});
        $("#viewport").mapbox("center").mapbox('zoomTo', 0).mapbox("up", 700);
        jQuery(".map-control a").click(function() {//control panel
            var viewport = $("#viewport");
            //this.className is same as method to be called
            if(this.className == "zoom" || this.className == "back") {
                viewport.mapbox(this.className, 2);//step twice
            }
            else {
                if(this.className=='up' || this.className=='down'){
                    viewport.mapbox(this.className, boxHeight);
                }
                if(this.className=='left' || this.className=='right') {
                    waitOnLoad();
                    var direction = this.className == 'right' ? 1 : -1;
                    changePage(direction);
                    var fileName = getBigFileName();
                    var midl = getMidlFileName();
                    $('#pict').css('background-image', 'url(' + midl + ')');
                    $('#pict_big').attr('src', fileName);
                    $("#viewport").mapbox({mousewheel: true});
                    $("#viewport").mapbox("center").mapbox("up", 700).mapbox('zoomTo', 0);
                }
                if(this.className=='close'){
                    close();
                }
            }
            return false;
        });
    });

    function changePage(direction) {
        if (direction < 0 && nextPage == 0) {
            return false;
        }
        nextPage += direction;
    }

    function getMidlFileName() {
        var page = $('#flipSelect').val();
        var url = "<?= $url ?>";

        if(LeftSideOn)
            var p = nextPage-1;
        else
            var p = nextPage;

        return url + p + "m.jpg";
    }
    function getBigFileName() {
        var page = $('#flipSelect').val();
        var url = "<?= $url ?>";
        if(LeftSideOn)
            var p = nextPage-1;
        else
            var p = nextPage;
        return url + p + "b.jpg";
    }



    function toggleLoading() {
        $('#wrap_loading').toggle();
    }

    function showLoading() {
        $('#wrap_loading').show();
    }

    function hideLoading() {
        $('#wrap_loading').hide();
    }

    function waitOnLoad() {
        showLoading();
        $('.map-layer-mask').remove();
        $('.mapcontent').remove();
        $('#pict_big').ready(function () {
            hideLoading();
        });
    }

    function close()
    {
        $('.map-layer-mask').remove();
        $('.mapcontent').remove();
        $('#modal').dialog( "close" );
        $('#draggable').css('display','none');
    }


    $(document).keyup(function(e) {
      if (e.keyCode == 27) {$('#draggable').css('display','none'); }   // esc
    });
</script>

<script type="text/javascript">
    /****************************************************************************
     //** Software License Agreement (BSD License)
     //** Book Flip slideshow script- Copyright 2011, Will Jones (coastworx.com)
     //** This Script is wholly developed and owned by CoastWorx.com
     //** Copywrite: http://www.coastworx.com/
     //** You are free to use this script so long as this coptwrite notices
     //** and link back to http://www.coastworx.com stays intact in its entirety.
     //** If you want to remove the link back to http://www.coastworx.com then purchase a licence.
     //** You are NOT Permitted to claim this script as your own or
     //** use this script for commercial purposes without the express
     //** permission of CoastWorx Technologies!
     //***************************************************************************/

    pWidth = 600; //width of each page
    pHeight = 900; //height of each page

    numPixels = 20;  //size of block in pixels to move each pass
    pSpeed = 15; //speed of animation, more is slower

    startingPage = "0";//select page to start from, for last page use "e", eg. startingPage="e"
    allowAutoflipFromUrl = true; //true allows querystring in url eg bookflip.html?autoflip=5

    pageBackgroundColor = "#CCCCCC";
    pageFontColor = "#ffffff";

    pageBorderWidth = "1";
    pageBorderColor = "#3D4D5D";
    pageBorderStyle = "solid";  //dotted, dashed, solid, double, groove, ridge, inset, outset, dotted solid double dashed, dotted solid

    pageShadowLeftImgUrl = "/images/zoom/black_gradient2.png";
    pageShadowWidth = 100;
    pageShadowOpacity = 60;
    pageShadow = 1 //0=shadow off, 1= shadow on left page

    allowPageClick = true; //allow page turn by clicking the page directly
    allowNavigation = true; //this builds a drop down list of pages for auto navigation.
    pageNumberPrefix = "page "; //displays in the drop down list of pages if enabled

    ini();
</script>